<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>组织机构维护</title>
    <link rel="stylesheet" href="/lib/layui-v2.5.4/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/public.css" media="all"/>
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"/>
    <style>
        html, body {
            height: 100%;
            margin: 0 !important;
        }

        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
    </div>
</div>

<div hidden="hidden" id="menuform" style="margin: 10px 10px 10px 10px">
    <form class="layui-form " action="" lay-filter="menufrom">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="required" required placeholder="请输入菜单名" autocomplete="off"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接地址</label>
            <div class="layui-input-inline">
                <input type="text" name="href" placeholder="请输入菜单链接" autocomplete="off" class="layui-input"/>
            </div>
            <div class="layui-form-mid layui-word-aux">格式:"/html/..."(省略最后的.html)</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上级菜单</label>
            <div class="layui-input-inline">
                <select name="pid" lay-verify="required" id="pid">
                    <option value="0">最上层</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">默认图标</label>
            <div class="layui-input-inline">
                <input type="text" name="icon" id="iconPicker" lay-filter="iconPicker" class="hide"/>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="有效" checked="checked"/>
                <input type="radio" name="status" value="0" title="无效"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">target属性</label>
            <div class="layui-input-block">
                <input type="radio" name="target" value="_self" title="_self" checked="checked"/>
                <input type="radio" name="target" value="_blank" title="_blank"/>
                <input type="radio" name="target" value="_parent" title="_parent"/>
                <input type="radio" name="target" value="_top" title="_top"/>

            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">排序号</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" lay-verify="required|number" autocomplete="off" class="layui-input"/>
                <input type="hidden" name="id" id="id"/>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="formDemo">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="formDemoClose">退出</button>
            </div>
        </div>
    </form>

</div>

<div hidden="hidden" id="addOrganizationForm">
    <form class="layui-form" action="" lay-filter="addOrganizationForm">
        <div style="padding-right: 20px">
            <div class="layui-form-item" style="margin-top:20px ">
                <label class="layui-form-label required">名称:</label>
                <div class="layui-input-block">
                    <input type="text" id="name" name="name" lay-verify="required" lay-reqtext="名称不能为空" value=""
                           class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">编码:</label>
                <div class="layui-input-block">
                    <input type="text" name="code" lay-verify="required" lay-reqtext="编码不能为空" value=""
                           class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">上级单位:</label>
                <div class="layui-input-block">
                    <input type="text" name="parentId" id="parentId" lay-filter="parentId" class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">院区:</label>
                <div class="layui-input-block">
                    <select name="property1" lay-verify="required" lay-reqtext="所属院区不能为空">
                        <option value="" checked>请选择</option>
                        <option value="H0001">主院区</option>
                        <option value="H0002">阿乐惠院区</option>
                        <option value="H0003">维吾尔医医院</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">机构类型</label>
                <div class="layui-input-block">
                    <select name="organizationtypeCode" lay-verify="required" lay-reqtext="机构类型不能为空">
                        <option value="" checked>请选择</option>
                        <option value="YL">医疗</option>
                        <option value="XZ">行政</option>
                        <option value="KY">科研</option>
                        <option value="HQ">后勤</option>
                        <option value="JX">教学</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">细分类别:</label>
                <div class="layui-input-block">
                    <select name="property3">
                        <option value="" checked>请选择</option>
                        <option value="0">其他</option>
                        <option value="1">临床专科</option>
                        <option value="21">诊疗组</option>
                        <option value="3">门诊</option>
                        <option value="4">医技</option>
                        <option value="51">药库</option>
                        <option value="52">药房</option>
                        <option value="6">手术</option>
                        <option value="7">护理单元</option>
                        <option value="8">门诊诊区</option>
                        <option value="9">预约小组</option>
                        <option value="10">教学单元</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">拼音码:</label>
                <div class="layui-input-block">
                    <input type="text" name="pinyinCode" id="pinyinCode" value="" class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">五笔码:</label>
                <div class="layui-input-block">
                    <input type="text" name="wubiCode" id="wubiCode" value="" class="layui-input"></input>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">地址:</label>
                <div class="layui-input-block">
                    <input type="text" name="address" value="" class="layui-input"></input>
                </div>
            </div>

            <input type="text" name="id" hidden></input>
        </div>
        <div style="padding-top: 5px;padding-bottom: 20px;">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="saveBtn">确认</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm" type="reset">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/html" id="toolbar" lay-filter="toolbar">
    <div>
        <div class="layui-btn-group">
            <input style="display:inline-block;width: 140px;height:30px;vertical-align:middle;border: 1px solid #C9C9C9;font-size: 14px;"
                   type="text" name="inputCode" id="inputCode" placeholder="关键词搜索" autocomplete="off"
                   class="layui-input"></input>
            <button class="layui-btn layui-btn-sm layui-btn-primary tableSelect_btn_search" lay-event="search"
                    id="btnSearch">
                <i class="layui-icon layui-icon-search"></i>
            </button>
        </div>
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm data-refresh-btn layui-btn-primary" lay-event="refresh"><i
                    class="layui-icon layui-icon-refresh"></i></button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add"><i
                    class="layui-icon layui-icon-add-1"></i></button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="update"><i
                    class="layui-icon layui-icon-edit"></i></button>
            <button class="layui-btn layui-btn-sm layui-btn-primary data-delete-btn" lay-event="delete"><i
                    class="layui-icon layui-icon-delete"></i></button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="expand"><i
                    class="fa fa-folder-open-o"></i></button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="fold"><i class="fa fa-folder-o"></i>
            </button>
        </div>
    </div>
</script>

<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/js/pinyin.js"></script>
<script>
    layui.use(['table', 'treeTable', 'form', 'layer', 'treeSelect'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treeTable = layui.treeTable;
        var form = layui.form;
        var layer = layui.layer;
        var treeSelect = layui.treeSelect;
        var insTb;

        var size = {
            width: window.innerWidth || document.body.clientWidth,
            height: window.innerHeight || document.body.clientHeight
        }

        var layerOpenIndex;

        $(function () {
            insTb = treetableload();
        })

        treeSelect.render({
            // 选择器
            elem: '#parentId',
            // 数据
            data: '/bds/getBdsOrganizationJson',
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function (d) {
                // console.log(d);
            },
            // 加载完成后的回调函数
            success: function (d) {

            }
        });

        //树形表格重载
        function treetableload() {
            // 渲染表格
            var index = layer.msg('服务器处理中...', {
                icon: 16
                , shade: 0.08,
                time: 0
            });
            // 渲染表格
            return treeTable.render({
                elem: '#munu-table',
                url: '/bds/getBdsOrganization',
                height: 'full-50',
                size: 'sm',
                skin: 'line',
                even: true,
                defaultToolbar: ['filter', 'print', 'exports'],
                toolbar: '#toolbar',
                tree: {
                    iconIndex: 1,
                    isPidData: true,
                    idName: 'id',
                    pidName: 'parentId',
                    arrowType: 'arrow2',
                    getIcon: 'ew-tree-icon-style2'
                },
                cols: [ [
                    {type: 'radio'},
                    {field: 'name', title: '名称'},
                    {field: 'code', title: '编码', hide: (size.width < 500)},
                    {field: 'organizationtypeCode', title: '机构类型', hide: (size.width < 500)},
                    {field: 'property1', title: '院区', hide: (size.width < 500)},
                    {field: 'id', title: '主键ID', hide: true},
                    {field: 'pinyinCode', title: '拼音码', hide: true},
                    {field: 'wubiCode', title: '五笔码', hide: true},
                    {field: 'parentId', title: '上级ID', hide: true},
                    {field: 'property3', title: '细分类别', hide: (size.width < 500)},
                    {field: 'address', title: '地址', hide: (size.width < 500)},
                ]],
                style: 'margin-top:0;',
                done: function (data, curr, count) {
                    layer.close(index);
                }
            });
        }

        // 头部工具栏点击事件
        treeTable.on('toolbar(munu-table)', function (obj) {
            switch (obj.event) {
                case 'fold':
                    insTb.foldAll();
                    break;
                case 'expand':
                    insTb.expandAll();
                    break;
                case 'refresh':
                    insTb.refresh();
                    break;
                case 'add':
                    form.val('addOrganizationForm', {
                        id: null,
                        name: null,
                        code: null,
                        property1: null,
                        property3: null,
                        address: null,
                        pinyinCode: null,
                        wubiCode: null
                    });
                    openUpdateUi("添加组织机构");
                    break;
                case 'delete':
                    if (insTb.checkStatus().length > 0) {
                        let row = insTb.checkStatus()[0];
                        layer.confirm('确定要删除组织机构 ' + row.name + ' ？', function () {
                            delBdsOrganization(row);
                        });
                    } else {
                        layer.alert('请先选择组织机构', {
                            icon: 2
                        })
                    }
                    break;
                case 'update':
                    if (insTb.checkStatus().length > 0) {
                        let row = insTb.checkStatus()[0];
                        if (row.parentId != '0') {
                            treeSelect.checkNode('parentId', row.parentId);
                        } else {
                            treeSelect.revokeNode('parentId');
                        }
                        form.val('addOrganizationForm', {
                            id: row.id,
                            name: row.name,
                            code: row.code,
                            parentId: row.parentId,
                            property1: row.property1,
                            property3: row.property3,
                            address: row.address,
                            pinyinCode: row.pinyinCode,
                            wubiCode: row.wubiCode,
                            organizationtypeCode: row.organizationtypeCode
                        });
                        openUpdateUi("修改组织机构-" + row.name);
                    } else {
                        layer.alert('请先选择组织机构', {
                            icon: 2
                        })
                    }
                    break;
                case 'LAYTABLE_TIPS':
                    layer.msg('提示');
                    break;
                case 'search':
                    search();
                    break;
            }
        });

        function delBdsOrganization(obj) {
            var index = layer.msg('服务器处理中...', {
                icon: 16
                , shade: 0.08,
                time: 0
            });

            $.ajax({
                url: "/bds/delBdsOrganization",
                type: "POST",
                data: {
                    id: obj.id
                },
                success: function (obj) {
                    layer.close(index);
                    if (obj.code == "0") {
                        layer.msg("删除成功！", {icon: 6, time: 3000})
                        treetableload();
                        insTb.reload()
                    } else {
                        layer.alert(obj.msg, {
                            icon: 2
                        })
                    }

                }
            });
        }

        function openUpdateUi(title) {
            layerOpenIndex = layer.open({
                type: 1,
                title: title,
                content: $("#addOrganizationForm")
            });
        }

        //监听行单击事件
        treeTable.on('row(munu-table)', function (obj) {
            $(document).find('.layui-table-click').removeClass('layui-table-click');
            obj.tr.addClass('layui-table-click');
            insTb.expand(obj.data.id);
            insTb.setChecked([obj.data.id]);
            treeSelect.checkNode('parentId', obj.data.id);
        });

        // 搜索
        function search() {
            var keywords = $('#inputCode').val();
            if (keywords) {
                if (typeof (keywords) === 'string') {
                    keywords = keywords.toUpperCase();
                }
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
        };

        $("#inputCode").on("input", function (e) {
            search();
        });

        $("#name").on("change", function (e) {
            $('#pinyinCode').val(makePy(e.target.value));
            $('#wubiCode').val(makeWb(e.target.value));
        });

        form.on('submit(addOrganizationForm)', function (obj) {
            var index = layer.msg('服务器处理中...', {
                icon: 16
                , shade: 0.08,
                time: 0
            });
            $.ajax({
                url: "/bds/saveBdsOrganization",
                type: "POST",
                data: form.val('addOrganizationForm'),
                success: function (obj) {
                    layer.close(index);
                    treetableload();
                    insTb.reload();
                }
            });
            layer.close(layerOpenIndex);
            return false;
        })
    });
</script>
</body>
</html>
